Skip to main content

yLinkButton

ybutton

Description​

The yLinkButton is a clickable element with different optical styles, used to indicate its different states. The yLinkButton can be used to trigger a user action and to redirect to other pages. For example:

Basic Structure​

In the following the basic structure of the yLinkButton shall be explained. For the general structure of a yComponent please visit the YBase-components basic-structure.

The yLinkButton as seen above contains a label and a icon.

Label​

The label contains the text inside the button. It is normally in the center of the component, but can also be displayed on the right or left site. By changing the inner padding of the button, the label gets moved too. You can find further explanation at the Label Property.

Icon​

The icon can be used to show an icon inside the yLinkButton. You can have a maximum of two icons in a yLinkButton. The icon can be before or after the text and if you want to have only one yLinkButton with one icon, then you have to delete the text in the Label. You can find further explanation at the Icon Property. An icon is structured as you can see below:

Properties​

METAread more
Name: componentId
Not Editable
Number Property
--y-link-button__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
--y-link-button__component-type

The type of the component. For this component it is -link-button.

Name: name
String Property
--y-link-button__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
--y-link-button__version

The custom version of the LinkButton-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
--y-link-button__core-theme

The CoreTheme, which will be apllied to the LinkButton. For further information on themes visit the themes page.

Name: subTheme
String Property
--y-link-button__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the LinkButton. For further information on themes visit the themes page.

Name: groupTheme
String Property
--y-link-button__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
--y-link-button__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
--y-link-button__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
--y-link-button__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
--y-link-button__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
--y-link-button__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
--y-link-button__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
--y-link-button__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
--y-link-button__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
--y-link-button__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
--y-link-button__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
--y-link-button__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
--y-link-button__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
--y-link-button__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
--y-link-button__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
--y-link-button__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
--y-link-button__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
--y-link-button__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
--y-link-button__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you'll find a collection of application scenarios and examples that illustrate how to leverage the yLinkButton in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

Button Elevated
Button Flat
Button Outlined
Button Rounded
Button Plain
genericsizeminWidth120px
stylebackgroundbgColor__normal#44ddbb
styleshadowboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborderRadius8px
stylelabellabel__fontColor__normal#FFFFFF

Label​

LinkButton Label
genericsizeminWidth150px
stylelabellabel__fontColor#FFFFFF
stylelabellabel__fontFamily'Roboto'
stylelabellabel__fontStyle'italic'
stylelabellabel__fontSize20px
stylelabellabel__fontWeight'bold'
stylelabellabel__textTransform'uppercase'
stylelabellabel'Proceed'

Icon​

LinkButton Icon Right
LinkButton Icon Both
LinkButton Icon Only
stylebackgroundbgColor__normal#FF1654
stylelabellabel__fontColor__normal#FFFFFF
stylelabellabel__fontWeight__normalbold
stylelabellabel__fontAligncenter
stylelabellabel__textTransform__normaluppercase
styleiconicon__colorPrimary__normal#FFFFFF
styleiconiconPositioniconRight
styleiconiconRightfas-fa-arrow-right

Redirecting​

The button component enables you redirect to pages or extern URL each time it is clicked.

For instance, you could redirect to an official website to give further information about a topic your application handles.

How to:

  1. Navigate to "Component" inside the Detail Panel and unfold the group "Misc".
  2. Choose a LinkTarget of your liking by inserting the relative route of your page or an external url.

Calling a custom javascript function​

The yLinkButton component enables you to execute a custom JavaScript function each time it is clicked, similar to the yButton.

For instance, you could set up a function that alerts "Attention, redirecting!", before redirecting.

How to:

  1. Follow the steps in Redirecting Example.
  2. Open the editor under "Event", unfold "Input" and open "EvtClicked".
  3. Associate a custom JavaScript function to the yLinkButton. This function will be invoked every time the button is clicked.
  4. Include the provided JavaScript snippet below to implement an alert function on the button.

Code example:

You can add the following JavaScript code snippet to your application to implement a an alert function on the yLinkButton component.

With this function, each click alerts a message before redirecting.

EvtClicked
// function onLink-button_7_EvtClicked (apiObject, component, eventData) {

alert("Attention, redirecting!");

// }

Interacting with Clipboard​

You can use the yLinkButton to control Clipboards. The yeetClipboard functionality provides an effective method for managing for example table entries. As example, you can set up a mechanism to delete a table entry by a simple button click.

How to:

  1. Open the Detail Panel and proceed to the events tab and locate the "Control" section. Here, you'll need to enable the "Commit-Create" option. This step empowers the yLinkButton component with the capability to perform this functionality.
  2. Create a new Clipboard and enable the "Use Entity" toggle.
Button Clipboard useEntity
  1. Then you can click on "Entity-Properties" and edit the "Entity". This Clipboard should be linked to the entity containing the table entry you wish to delete. This way you have to fill in the data, like in the picture below.
Button Clipboard Entity
  1. The _id under "Keys" should be the entry that you wish to delete.
  2. Finally, go to the "Events", edit it and select the yButton as SourceLink-1 via the SourceLink Picker. Dont forget that the event has to be "commit-delete".
Button Clipboard SourceLink
This will establish a button that, when clicked, will delete the specified entry from your table.

If you want to know more about this topic, visit the Clipboard.